<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="shortcut icon" type="image/x-icon" href=" http://localhost:8080/Electronic_Business/image/favicon.ico" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>京东首页</title>
<script src="js/jquery-1.8.0.js" type="text/javascript"></script>
	<script type="text/javascript">
		var i=1;
		$(function(){	
			$("li").click(function(){
				var a=$(this).val();
				i=a;
				$("#tc").attr("src","image/"+a+".jpg");
				$("li").css("backgroundColor","grey");
				$("#"+i).css("backgroundColor","RGB(170,0,0)");
			});
		});
		function lb(){
			$("#tc").attr("src","image/"+i+".jpg");	
			$("li").css("backgroundColor","grey");
			$("#"+i).css("backgroundColor","RGB(170,0,0)");
			i=i+1;
			if(i==8){
				i=1;
			}
			setTimeout("lb()",1000);
		}
		
		$(function(){
			$(".zhineng").mouseenter(function(){
				$(this).css("background-color","black");
				$(this).siblings().css("display","block");
				 x=document.getElementById("mtwo");
				//x.style.display="block";		
			});
			$(".zhineng").mouseleave(function(){
				$(this).css("background-color","#373238");
				var x=$(this).siblings();
				$(this).siblings().css("display","none");
				 x=document.getElementById("mtwo");
				//x.style.display="none";	
				$(x).mouseenter(function(){
					x.css("display","block");	
				});
				$(x).mouseleave(function(){
					x.css("display","none");	
				});
			});
			$(".one").hover(
					//移入时的方法
					function(){
						$(this).css("left","15px");
					},
					//移出时的方法
					function(){
						$(this).css("left","5px");
					}
				);
			$(".ruishis").mouseenter(function(){
				$(this).css("border","1px solid orange");
			});
			$(".ruishis").mouseleave(function(){
				$(this).css("border","1px solid #eee");
			});
			
		});
		function pass(id){
			alert(id);
			//self.location="ProductMessage.jsp";
			
			
		}
  </script>
<style>
	
	
	li {
			color:white;
			height: 20px;
			width: 20px;
			list-style:none;
			text-align: center;
			float: left;
			border-radius:90px;
			position:relative;
			bottom:30px;
			left:320px;
			cursor:pointer;
		}
	
	.three{
	       float:left;
	       z-index:1;
	       width:52%;
	       
	}
	.four{
		width:210px;
		height:430px;
		border:1px solid black;
		background-color:RGB(55,50,56);
		color:white;
		font-size:12px;
		text-align:left;
		
	}
	
	.five{
		margin-left:-10px;
	}
	
	.six{	
		height:400px;
		margin-top:30px;
		width:100%;	
	}
	
	.brand{
		float: right;
		list-style: none;
		font-size:14px;
		color:grey;
		margin-left:30px;
	}
	
	
	a:visited,a:link{
		color:black;
		text-decoration:none; 
		color:white;
		padding-right:35px;
		text-align:left;
	}
	.mone{
		width:23%;
		background-color:RGB(55,50,56);
		height: 400px;
		color: white;
		font-size: 12px;
		text-align: left;
		float: left;
	}
	
	#mtwo{
		position:absolute;
		z-index：2;
		left:218px;
		width: 200px;
		height: 400px;
		float: left;
		display:none;
	}
	.zhineng{
		background-color: RGB(55, 50, 56);
		width: 210px;
		border: 1px dotted grey;
	}
	
	.tab{
		margin:0 auto;
		width:180px;
		height:340px;
		border:1px solid grey;
		background-color:white;
		border-collapse: collapse;
	}
	.tab tr td{
		border: 1px #DDD solid;
	}
	.tit{
		width:100%;
		height:45px;
		line-height:45px;
		margin-left:10px;
		color:RGB(170,0,0);
		font-weight:bold;
		margin:0px auto;
		
	}
	.ruishiBrand,.zhinengBrand,.oumeiBrand,.childBrand,.rihanBrand,.guoneiBrand{
		width:100%;
		height:330px;
		float:left;
	}
	.maoji{
		background-color:gray;
		border:1px solid grey;
		width:4%;
		height:430px;
		float:right;
		position:fixed;
		right:0px;
		top:100px;
		font-size:14px;
	
	}
	
	.ruishis{
		width:19%;
		height:250px;
		border:1px solid #eee;
		float:left;
		margin:15px 20px 10px 20px; 
		font-size:12px;
		
	}
	span{
		color:red;
		font-weight:bold;
		font-size:14px;
	}
	.span{
		margin-left:129px;
		color:white;
	}
	.brandimg{
		width:100%;
		height:80px;
		float:left;
		margin-top:0px;
	}
	
</style>
</head>

<body  onload="lb()">
	<div class="maoji">
	<a href="#ruishi">瑞士品牌</a>
	<hr style="width:100%;color:grey;">
	<a href="#zhineng">智能手表</a>
	<hr style="width:100%;color:grey;">
	<a href="#oumei">欧美品牌</a>
	<hr style="width:100%;color:grey;">
	<a href="#child">儿童座钟</a>
	<hr style="width:100%;color:grey;">
	<a href="#rihan">日韩品牌</a>
	<hr style="width:100%;color:grey;">
	<a href="#guonei">国内品牌</a>
	<hr style="width:100%;color:grey;">
	</div>
	<div>
	<iframe src="header.jsp" width="100%" height="200px" frameborder="0" scrolling="no"></iframe>
	</div>
	<hr>
	
	 <div class="mone">
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu3.jpg"></td>
					<td><img src="image/menu4.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu5.jpg"></td>
					<td><img src="image/menu6.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu7.jpg"></td>
					<td><img src="image/menu8.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu9.jpg"></td>
					<td><img src="image/menu10.jpeg"></td>
				</tr>
			</table>
			</div>
			<div class="zhineng">
				<h3>
					<a>瑞士品牌</a><span class="span">></span>
				</h3>
				<div>
					<a target="_blank" href="" title="天梭">天梭</a> <a target="_blank"
						href="" title="浪琴">浪琴</a> <a target="_blank" href="" title="美度">美度</a>
				</div>
			</div>
		</div>
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu3.jpg"></td>
					<td><img src="image/menu4.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu5.jpg"></td>
					<td><img src="image/menu6.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu7.jpg"></td>
					<td><img src="image/menu8.jpg"></td>
				</tr>
				
			</table>
			</div>
			<div class="zhineng">
				<h3>
					<a>智能手表</a><span class="span">></span>
				</h3>
				<div class="ext" clstag="">
					<a target="_blank" href="" title="颂拓">颂拓</a> <a target="_blank"
						href="" title="佳明">佳明</a> <a target="_blank" href="" title="宜准">宜准</a>
				</div>
			</div>
		</div>
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu3.jpg"></td>
					<td><img src="image/menu4.jpg"></td>
				</tr>
				
				
			</table></div>
			<div class="zhineng">
				<h3>
					<a>欧美品牌</a><span class="span">></span>
				</h3>
				<div class="" clstag="">
					<a target="_blank" href="" title="CK">CK</a> <a target="_blank"
						href="" title="坤格">坤格</a> <a target="_blank" href="" title="斯沃琪">斯沃琪</a>
				</div>
			</div>
		</div>
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu3.jpg"></td>
					<td><img src="image/menu4.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu5.jpg"></td>
					<td><img src="image/menu6.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu7.jpg"></td>
					<td><img src="image/menu8.jpg"></td>
				</tr>
				
			</table></div>
			<div class="zhineng">
				<h3>
					<a>儿童座钟</a><span class="span">></span>
				</h3>
				<div class="ext" clstag="">
					<a target="_blank" href="" title="精工挂钟">挂钟</a> <a target="_blank"
						href="" title="霸王POWER">霸王</a> <a target="_blank" href=""
						title="迪斯尼">迪斯尼</a>
				</div>
			</div>
		</div>
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu3.jpg"></td>
					<td><img src="image/menu4.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu5.jpg"></td>
					<td><img src="image/menu6.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu7.jpg"></td>
					<td><img src="image/menu8.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu9.jpg"></td>
					<td><img src="image/menu10.jpeg"></td>
				</tr>
			</table>
			</div>
			
			<div class="zhineng">
				<h3>
					<a>日韩品牌</a><span class="span">></span>
				</h3>
				<div class="ext" clstag="">
					<a target="_blank" href="" title="精工">精工</a> <a target="_blank"
						href="" title="卡西欧">卡西欧</a> <a target="_blank" href="" title="西铁城">西铁城</a>

				</div>
			</div>
		</div>
		<div>
			<div id="mtwo" style="float: right">
			<table class="tab" border="1" cellspacing="0">
				<tr>
					<td><img src="image/menu1.jpg"></td>
					<td><img src="image/menu2.jpg"></td>
				</tr>
				
				<tr>
					<td><img src="image/menu7.jpg"></td>
					<td><img src="image/menu8.jpg"></td>
				</tr>
				<tr>
					<td><img src="image/menu9.jpg"></td>
					<td><img src="image/menu10.jpeg"></td>
				</tr>
			</table></div>
			<div class="zhineng">
				<h3>
					<a>国内品牌</a><span class="span">></span>
				</h3>
				<div class="ext" clstag="">
					<a target="_blank" href="" title="天王">天王</a> <a target="_blank"
						href="" title="飞亚达">飞亚达</a> <a target="_blank" href="" title="罗西尼">罗西尼</a>

				</div>
			</div>
		</div>
	</div>
<div id="mtwo">
	<table class="tab" border="1" cellspacing="0">
		<tr>
			<td><img src="image/menu1.jpg"></td>
			<td><img src="image/menu2.jpg"></td>
		</tr>
		<tr>
			<td><img src="image/menu3.jpg"></td>
			<td><img src="image/menu4.jpg"></td>
		</tr>
		<tr>
			<td><img src="image/menu5.jpg"></td>
			<td><img src="image/menu6.jpg"></td>
		</tr>
		<tr>
			<td><img src="image/menu7.jpg"></td>
			<td><img src="image/menu8.jpg"></td>
		</tr>
		<tr>
			<td><img src="image/menu9.jpg"></td>
			<td><img src="image/menu10.jpeg"></td>
		</tr>
	</table>
</div>
		
		<div class="three">
			<img src="1.jpg" width="650px" height="400px" id="tc" /><br>
				<li value="1" id="1">1</li>
				<li value="2" id="2">2</li>
				<li value="3" id="3">3</li>
				<li value="4" id="4">4</li>
				<li value="5" id="5">5</li>
				<li value="6" id="6">6</li>
				<li value="7" id="7">7</li>
				
		</div>
		<img src="image/watchright.jpg" style="float:right;height:400px;width:25%;">
	
	
	<div class="brandimg">
	<img src="image/brandimg.jpg">
	</div>
	<div class="ruishiBrand" >
		<div class="tit"><a name="ruishi">瑞士品牌</a></div>
		<c:forEach items="${list}" var="pinpai">
			<div class="ruishis" onclick="pass(${list.proId})">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p >市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p >促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>	
	</div>
	
	<div class="brandimg">
	<img src="image/brandimg2.jpg">
	</div>
	<div class="zhinengBrand">
	<div class="tit"><a name="zhineng">智能手表</a></div>
	<c:forEach items="${list2}" var="pinpai">
			<div class="ruishis">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p style="">市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p style="">促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>				
	</div>
	
	<div class="brandimg">
	<img src="image/brandimg3.jpg">
	</div>
	<div class="oumeiBrand">
	<div class="tit"><a name="oumei">欧美品牌</a></div>
	<c:forEach items="${list3}" var="pinpai">
			<div class="ruishis">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p style="">市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p style="">促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>	
	</div>
	
	<div class="brandimg">
	<img src="image/brandimg4.jpg">
	</div>
	<div class="childBrand">
	<div class="tit"><a name="child">儿童座钟</a></div>
	<c:forEach items="${list4}" var="pinpai">
			<div class="ruishis">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p style="">市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p style="">促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>	
	</div>
	
	<div class="brandimg">
	<img src="image/brandimg5.jpg">
	</div>
	<div class="rihanBrand">
	<div class="tit"><a name="rihan">日韩品牌</a></div>
	<c:forEach items="${list5}" var="pinpai">
			<div class="ruishis">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p style="">市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p style="">促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>	
	</div>
	
	<div class="brandimg">
	<img src="image/brandimg6.jpg">
	</div>
	<div class="guoneiBrand">
	<div class="tit"><a name="guonei">国内品牌</a></div>
	<c:forEach items="${list6}" var="pinpai">
			<div class="ruishis">
				<img src="image/meidu1.jpg" class="one" style="position: relative;left:5px">
				<h3>${pinpai.productName}</h3>
				<p style="">市场价：<s>￥${pinpai.productOtherPrice}元</s></p>
				<p style="">促销价：<span>￥${pinpai.productPrice}元</span></p>
			</div>
		</c:forEach>	
	</div>
	<div class="brandimg">
	<img src="image/brandimg7.jpg">
	</div>
	<div>
	<iframe src="foot.jsp" width="100%" height="350px" frameborder="0" scrolling="no"></iframe>
	</div>
	</body>
</html>